<!DOCTYPE html>
<html>
  <head>
    <title>幸运抽奖</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <script src="https://cdn.jsdelivr.net/npm/fingerprintjs2@2.1.4/dist/fingerprint2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: #ff6b6b;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      }

      .container {
        padding: 20px;
        min-height: 100vh;
        background: url('./img/phone_bg.png') no-repeat center center;
        background-size: cover;
      }

      .header {
        text-align: center;
        margin-bottom: 30px;
      }

      .header img {
        width: 100%;
        max-width: 300px;
      }

      .form-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 80%;
        background: #fff;
        border-radius: 15px;
        padding: 20px;
        margin: 0 auto;
        max-width: 500px;
      }

      .form-item {
        margin-bottom: 20px;
      }

      .form-item label {
        display: block;
        color: #f23030;
        font-size: 16px;
        margin-bottom: 8px;
      }

      .form-item input {
        width: 100%;
        height: 44px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0 15px;
        font-size: 16px;
        background: #f5f5f5;
      }

      .form-item input:focus {
        outline: none;
        border-color: #ff6b6b;
      }

      .submit-btn {
        width: 100%;
        height: 44px;
        background: #f23030;
        border: none;
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        margin-top: 20px;
      }

      .submit-btn:active {
        background: #e62929;
      }

      .success-box {
        text-align: center;
        padding: 30px 20px;
      }

      .success-box img {
        width: 120px;
        margin-bottom: 20px;
      }

      .success-text {
        color: #f23030;
        font-size: 18px;
        font-weight: bold;
      }

      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="formBox" class="form-box">
        <div class="form-item">
          <label>1.请填写您的姓名：</label>
          <input type="text" id="name" placeholder="请输入..." />
        </div>
        <div class="form-item">
          <label>2.请填写您的手机号：</label>
          <input type="tel" id="phone" placeholder="请输入..." />
        </div>
        <button class="submit-btn" onclick="submitForm()">点击提交</button>
      </div>

      <div id="successBox" class="form-box success-box hidden">
        <img src="./img/success_img.png" alt="提交成功" />
        <div class="success-text">您已提交信息，坐等开奖吧~</div>
      </div>
    </div>

    <script>
      // 获取浏览器指纹
      async function getFingerprint() {
        const components = await Fingerprint2.getPromise()
        const values = components.map((component) => component.value)
        const fingerprint = Fingerprint2.x64hash128(values.join(''), 31)
        return fingerprint
      }

      // 检查是否已提交
      async function checkSubmitted() {
        const fingerprint = await getFingerprint()
        const submitted = localStorage.getItem('lottery_submitted_' + fingerprint)
        if (submitted) {
          document.getElementById('formBox').classList.add('hidden')
          document.getElementById('successBox').classList.remove('hidden')
        }
      }

      // 提交表单
      async function submitForm() {
        const name = document.getElementById('name').value.trim()
        const phone = document.getElementById('phone').value.trim()

        if (!name) {
          alert('请输入姓名')
          return
        }
        // if (!phone) {
        //   alert('请输入手机号')
        //   return
        // }
        if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
          alert('请输入正确的手机号')
          return
        }

        try {
          const fingerprint = await getFingerprint()
          const response = await axios.post('/api/person/save', {
            name,
            phone,
            dept: ''
          })

          if (response.data.code === 200) {
            localStorage.setItem('lottery_submitted_' + fingerprint, 'true')
            document.getElementById('formBox').classList.add('hidden')
            document.getElementById('successBox').classList.remove('hidden')
          } else {
            alert(response.data.message || '提交失败，请重试')
          }
        } catch (error) {
          console.error('提交失败:', error)
          alert('提交失败，请重试')
        }
      }

      // 页面加载完成后检查提交状态
      window.onload = checkSubmitted
    </script>
  </body>
</html>
